<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="main"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>客户贡献分析</title>
    <link th:href="@{../localcss/crmlist.css}" href="../../static/localcss/crmlist.css" rel="stylesheet">
    <script th:src="@{../js/echarts.min.js}" src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            客户贡献 <i class="fa fa-user"></i>
                            <small>
                                - 您可以通过搜索或者其他的筛选项对用户的信息进行编辑、删除等管理操作。^_^
                            </small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form method="post" action="/contrRpt/list" th:action="@{/contrRpt/list}">
                            <input type="hidden" name="pageIndex" value="1"/>
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">客户名称</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="odrCustomer" type="text" th:value="${odrCustomer}"
                                                   class="form-control col-md-6 col-xs-12" value="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">从</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="originDate" type="date" th:value="${originDate}"
                                                   class="form-control col-md-6 col-xs-12" value="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">到</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="finishDate" type="date" th:value="${finishDate}"
                                                   class="form-control col-md-6 col-xs-12" value="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询</button>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">订单编号
                                            </th>

                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                客户名称
                                            </th>

                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                商品名称
                                            </th>

                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                日期
                                            </th>

                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                商品介绍
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" th:each="order:${page.records}">
                                            <td tabindex="0" class="sorting_1" th:text="${order.odrId}">odrId</td>
                                            <td th:text="${order.odrCustomer}">odrCustomer</td>
                                            <td th:text="${order.product.prodName}">prodName</td>
                                            <td th:text="${order.odrDate}">odrDate</td>
                                            <td th:text="${order.product.prodBatch}">prodBatch</td>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-danger">点击操作</button>
                                                    <button type="button" class="btn btn-danger dropdown-toggle"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                        <span class="caret"></span>
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a class="editInfo" href="/contrRpt/edit?odrId=1" th:href="@{/contrRpt/edit(odrId=${order.odrId})}"
                                                               data-toggle="tooltip" data-placement="top" title=""
                                                               data-original-title="编辑"
                                                        >编辑</a></li>
                                                        <!--                                                        shiro:hasPermission="用户编辑"-->
                                                        <!--                                                        <li><a class="delInfo" id="del" href="#"-->
                                                        <!--                                                               th:onclick="doDel([[${order.odrId}]])"-->
                                                        <!--                                                               data-toggle="tooltip" data-placement="top" title=""-->
                                                        <!--                                                               data-original-title="删除">删除</a></li>-->
                                                        <!--                                                        shiro:hasPermission="用户删除"-->
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="dataTables_info" id="datatable-responsive_info"
                                         role="status" aria-live="polite">共<span th:text="${page.total }">1</span>条记录
                                        <span th:text="${page.current }">1</span>/<span th:text="${page.pages }">1</span>页</div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="dataTables_paginate paging_simple_numbers"
                                         id="datatable-responsive_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button previous" th:if="${page.current gt 0}"><a
                                                    href="javascript:page_nav(document.forms[0],1);"
                                                    aria-controls="datatable-responsive" data-dt-idx="0"
                                                    tabindex="0">首页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${page.current gt 0}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${page.current -1}+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">上一页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${(page.current) lt page.pages}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${page.current+1 }+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">下一页</a>
                                            </li>
                                            <li class="paginate_button next" th:if="${(page.current+1) lt page.pages}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${page.pages }+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="7"
                                                    tabindex="0">最后一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="chart" style="width: 1300px;height:300px;"></div>

    <script type="text/javascript" layout:fragment="js" th:inline="javascript">
        // // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('chart'));
        var cusName = [[${cusName}]];
        var dateTime = [[${dateTime}]];
        var oldName = [[${oldName}]];
        var strNewName = [[${strNewName}]];
        var old = [[${old}]];
        var xin = [[${xin}]];
        // 初始化空数组来存储补全后的数据
        var fullOldData = new Array(cusName.length).fill(0); // 初始值设为0，表示没有数据
        var fullXinData = new Array(cusName.length).fill(0); // 同样初始值设为0
        // 假设 old 和 xin 数组中的索引与客户名称的顺序相对应（如果不是，则需要额外的逻辑来匹配）
        // 遍历 old 和 xin 数组，并将数据放入对应的 fullOldData 和 fullXinData 位置
        for (var i = 0; i < cusName.length; i++) {
            var index = oldName.findIndex(function(name) {
                return name === cusName[i];
            });
            if (index !== -1) { // 如果找到了匹配的索引
                fullOldData[i] = old[index]; // 使用找到的数据填充 fullOldData
            }
            // 否则 fullOldData[i] 将保持为 0，表示没有数据
        }
        for (var j = 0; j < cusName.length; j++) {
            if (cusName[j] === strNewName[j]){
                fullXinData[j] = xin[j];
            }
            // 如果有数据，则直接使用；否则保持为0（已初始化）
        }
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: '客户贡献'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'cross',
                    label:{
                        backgroundColor:'#6a7985'
                    }
                }
            },
            legend: {
                data: dateTime
            },
            toolbox:{
                feature:{
                    saveAsImage:{}
                }
            },
            grid:{
                left:'3%',
                right:'4%',
                bottom:'3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundary: false,
                data: cusName
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '2007',
                    type: 'line',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: fullOldData
                },
                {
                    name: '2024',
                    type: 'line',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: fullXinData
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);
    </script>
</div>
</body>
</html>